import React, {FC, useCallback, useMemo} from "react";
import "./css/CTableLink.less";
import {formatLocalTitle, getBreadcrumb, getIconByData,  isFunction} from "@core/utils";
import {coreDispatch} from "../../utils/StoreUtil";
import DetailsContent from "../../main/content/DetailsContent";
import {useTranslation} from "react-i18next";
import {useNavigate} from "react-router";
import {isDatasetFn, previewFile} from "../../services/PreviewService";
import {configChange} from "../../Config";
import {getLinkClickByKey} from "../../services/LinkClickService.tsx";
import GlobalIcon from "../GlobalIcon.tsx";

let isShowLink: boolean;
configChange((config: any) => {
    isShowLink = config.isShowLink;
});

interface WorkspaceLinkProps {
    value: string,
    openMode: "split" | "tab" | "drawer" | "preview",
    datasetIdField: string,
    fileIdField: string,
    suffixField: string,
    fromObjectIdField: string,
    icon: string,
    children?: string,
    data: any,
    url: string,
    titleKey: string,
    objectId: string,
    objectName: string,
    objectTypeId: string,
    objectStatusId: string,
    queryParams: any,
    linkParams: any
    modalProps: any,
    ds: any,
    linkFun: string,
    linkComProps?: any,
    clickCheck?: any,
    isShowLink:boolean,
}

const WorkspaceLink: FC<WorkspaceLinkProps> = (props) => {

    const {t} = useTranslation();

    const navigateTo = useNavigate();

    const openDrawer: Function = useCallback(() => {
        const {data, titleKey = "zhCn|usEn|ptBr", linkParams = {}}: {
            data: any,
            titleKey: string,
            linkParams: any
        } = props;
        let key = props.objectId + "-" + props.objectTypeId + "-" + props.objectStatusId;
        const titleMap: any = formatLocalTitle(titleKey, data);
        coreDispatch("drawerReducer/createDrawer", {
            data: {
                key: "drawer-info-" + key,
                modalProps: {
                    placement: "right",
                    title: titleMap.show,
                    mask: false,
                    width: "65vw",
                    ...props.modalProps
                },
                component: DetailsContent,
                comProps: {
                    ...linkParams,
                    url: props.url,
                    objectId: props.objectId,
                    objectName: props.objectName,
                    objectTypeId: props.objectTypeId,
                    objectStatusId: props.objectStatusId,
                    queryParams: props.queryParams,
                    ds: props.ds
                }
            }
        });
    }, [props]);

    const openSplitPage: Function = useCallback(() => {
        const {ds, linkParams = {}}: { ds: any, linkParams: any } = props;
        if (ds && ds.splitPage) {
            ds.splitPage({
                ...linkParams,
                url: props.url,
                objectId: props.objectId,
                objectName: props.objectName,
                objectTypeId: props.objectTypeId,
                objectStatusId: props.objectStatusId,
                queryParams: props.queryParams,
                ds: props.ds
            })
        } else {
            openDrawer();
        }
    }, [props]);

    const openTabs: Function = useCallback(() => {
        const {data = {}, titleKey = "zhCn|usEn|ptBr", linkParams = {}}: {
            data: any,
            titleKey: string,
            linkParams: any
        } = props;
        let key = props.objectId + "-" + props.objectTypeId + "-" + props.objectStatusId;
        const titleMap: any = formatLocalTitle(titleKey, data);
        let breadcrumb: any[] = getBreadcrumb();
        coreDispatch("tabsReducer/addTabs", {
            data: {
                key: key,
                label: titleMap.show,
                labelCn: titleMap.zh,
                labelEn: titleMap.en,
                labelPt: titleMap.pt,
                tabType: "details",
                tabParams: {
                    ...linkParams,
                    url: props.url,
                    objectId: props.objectId,
                    objectName: props.objectName,
                    objectTypeId: props.objectTypeId,
                    objectStatusId: props.objectStatusId,
                    queryParams: props.queryParams,
                    ds: props.ds
                },
                breadcrumb: [...breadcrumb, {
                    labelCn: data.nameCn,
                    labelEn: data.nameEn
                }]
            }
        });
        let to: string = '/home/' + key;
        navigateTo(to);
        coreDispatch("titleReducer/addTitleMap", {
            key: to,
            value: {
                titleCn: titleMap.zh,
                titleEn: titleMap.en,
            }
        });
    }, [props]);

    const handleClick: Function = useCallback(() => {
        const {data = {}, linkFun, linkComProps} = props;
        let openMode: string = props.openMode || "split";

        // 如何有拓展方法这在点击之前调用该方法
        if (linkFun) {
            let fun: Function = getLinkClickByKey(linkFun);
            if (isFunction(fun)) {
                linkComProps ? fun(data, linkComProps) : fun(data)
            }
        }

        switch (openMode) {
            case "split":
                openSplitPage()
                break;
            case "tab":
                openTabs()
                break;
            case "drawer":
                openDrawer()
                break;
            case "preview":
                handlePreview()
                break;
        }
    }, [props]);

    const handlePreview: Function = useCallback(() => {
        const {data = {}, fileIdField, datasetIdField, suffixField, fromObjectIdField} = props;
        previewFile(data, {
            fileIdField,
            datasetIdField,
            suffixField,
            fromObjectIdField,
        });
    }, [props])

    const renderIcon = useMemo(() => {
        if (!(props.icon && getIconByData(props.icon, props.data))) {
            return null;
        }
        return (<GlobalIcon name={getIconByData(props.icon, props.data)}
                            className={"sf_core_drawer_info_link_icon"}/>)
    }, [props]);
    const renderFile = useMemo(() => {
        const {fileIdField, datasetIdField, objectTypeId}: {
            fileIdField: string,
            datasetIdField: string,
            objectTypeId: string
        } = props;
        if (!isDatasetFn(objectTypeId) || !(fileIdField || datasetIdField)) {
            return null
        }
        return (
            <GlobalIcon onClick={handlePreview} name={"icon-eyes"} className={"sf_core_drawer_info_link_icon"}/>
        )
    }, [props]);

    const renderLink = useMemo(() => {
        if (!isShowLink || !props.isShowLink) {
            return null
        }
        return (<GlobalIcon onClick={openTabs} name={"icon-eyes"} className={"sf_core_drawer_info_link_open"}/>)
    }, [props])

    const renderWorkspaceLink = useMemo(() => {
        let {clickCheck = true} = props
        if(!props.value){
            return null
        }
        return (<div className={"sf_core_drawer_info_link"}>
            {renderIcon}
            <span
                ref={(ref: any) => {
                    if (!ref) return;
                    ref.onclick = (e: any) => {
                        clickCheck || e.stopPropagation();
                        handleClick()
                    }
                }}
                className={"sf_core_drawer_info_link_value"}
            >{props.value}
            </span>
            {renderFile}
            {props.children}
            {renderLink}
        </div>)
    }, [props]);
    return (renderWorkspaceLink);
};

export default React.memo(WorkspaceLink);